<div class="panel panel-default panel-intro">
    {:build_heading()}

    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                    <div id="toolbar" class="toolbar">
                        {:build_toolbar('refresh,del')}
                        <div class="dropdown btn-group">
                            <a class="btn btn-primary btn-more dropdown-toggle btn-disabled disabled" data-toggle="dropdown"><i class="fa fa-cog"></i> {:__('More')}</a>
                            <ul class="dropdown-menu text-left" role="menu">
                                <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=normal"><i class="fa fa-eye"></i> {:__('Set to normal')}</a></li>
                                <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=hidden"><i class="fa fa-eye-slash"></i> {:__('Set to hidden')}</a></li>
                            </ul>
                        </div>
                        <div class="dropdown btn-group">
                            <a class="btn btn-success btn-more dropdown-toggle" data-toggle="dropdown"><i class="fa fa-download"></i> {:__('Download')}</a>
                            <ul class="dropdown-menu text-left" role="menu">
                                <li><a class="btn btn-link" href="javascript:;" data-toggle="modal" data-target="#downloadModal"><i class="fa fa-download"></i> {:__('Download Selected')}</a></li>
                            </ul>
                        </div>
                    </div>
                    <table id="table" class="table table-striped table-bordered table-hover table-nowrap"
                           data-operate-del="{:$auth->check('scanwork/image_manager/delete_audit_image')}" 
                           width="100%">
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 下载模态框 -->
<div class="modal fade" id="downloadModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title">下载图片</h4>
            </div>
            <div class="modal-body">
                <p>确定要下载选中的图片吗？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="downloadBtn">确定下载</button>
            </div>
        </div>
    </div>
</div>

<script>
    var Table = $("#table").bootstrapTable({
        url: 'scanwork/image_manager/audit_images',
        pk: 'id',
        sortName: 'id',
        sortOrder: 'desc',
        columns: [
            [
                {checkbox: true},
                {field: 'id', title: __('ID'), width: 80},
                {field: 'product_item.item_no', title: __('产品编号'), width: 150},
                {field: 'product_item.allocation.order.order_no', title: __('订单号'), width: 150},
                {field: 'product_item.allocation.model.product.name', title: __('产品名称'), width: 120},
                {field: 'product_item.allocation.model.name', title: __('型号'), width: 100},
                {field: 'product_item.allocation.process.name', title: __('工序'), width: 100},
                {field: 'product_item.allocation.user.nickname', title: __('员工'), width: 100},
                {field: 'upload_user.nickname', title: __('审核人'), width: 100},
                {field: 'audit_status', title: __('审核状态'), width: 100, formatter: Table.api.formatter.status},
                {field: 'audit_reason', title: __('审核备注'), width: 150},
                {field: 'createtime', title: __('审核时间'), width: 150, formatter: Table.api.formatter.datetime},
                {field: 'operate', title: __('操作'), width: 200, table: Table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
            ]
        ],
        operate: {
            view: {
                title: __('预览'),
                icon: 'fa fa-eye',
                class: 'btn btn-xs btn-info btn-dialog',
                url: 'scanwork/image_manager/preview',
                params: function(e, value, row, index) {
                    return {id: row.id, type: 'audit'};
                }
            },
            del: {
                title: __('删除'),
                icon: 'fa fa-trash',
                class: 'btn btn-xs btn-danger btn-delone'
            }
        }
    });
    
    // 下载按钮事件
    $('#downloadBtn').click(function() {
        var ids = Table.bootstrapTable('getSelections');
        if (ids.length == 0) {
            Toastr.error('请选择要下载的图片');
            return;
        }
        
        var idArr = [];
        $.each(ids, function(i, item) {
            idArr.push(item.id);
        });
        
        // 创建下载表单
        var form = $('<form method="post" action="scanwork/image_manager/download_images"></form>');
        form.append('<input type="hidden" name="ids" value="' + idArr.join(',') + '">');
        form.append('<input type="hidden" name="type" value="audit">');
        $('body').append(form);
        form.submit();
        form.remove();
        
        $('#downloadModal').modal('hide');
    });
</script> 